<template>
  <div class='leaders'>
    <a-modal
      width="1000px"
      :footer='null'
      :visible="visible"
      :body-style="{ backgroundColor: '#1b384d' }"
      @update:visible="updateVisible"
      @cancel='updateVisible'
      destroyOnClose
    >
      <template #title>
        <div class='titleBox'>
          <div class='modalTitle'>领导明细列表</div>
        </div>
      </template>
      <div style='padding: 20px'>
        <a-table
          :dataSource="dataSource"
          bordered
          :columns="columns"
          :pagination='false'
          :rowKey="(record,index)=>{return index}"
        >
          <template #name="{ text,record  }">
            <a style='cursor: pointer' @click='startBusinessCard(record)'>{{ text }}</a>
          </template>
        </a-table>
      </div>
    </a-modal>
  </div>

  <div v-if='cardVisible'>
    <business-card v-model:visible="cardVisible" :rowData='rowData'></business-card>
  </div>
</template>

<script>
import BusinessCard from '@/views/homePage/components/businessCard';

export default {
  components: {
    BusinessCard
  },
  name: 'riskModel',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
  },
  data(){
    return{
      cardVisible: false,
      rowData: {},
      dataSource: [],
      columns: [
        {
          title: '序号',
          width: 70,
          align: 'center',
          customRender:(params) =>{
            return params.index + 1
          }
        },
        {
          title: '姓名',
          dataIndex: 'name',
          key: 'name',
          align: 'center',
          width: 100,
          slots: { title: 'customTitle', customRender: 'name' },
        },
        {
          title: '总分',
          dataIndex: 'score',
          key: 'score',
          align: 'center',
          width: 80
        },
        {
          title: '战略决策类',
          dataIndex: 'value1',
          key: 'value1',
          align: 'center',
          width: 100
        },
        {
          title: '贯彻执行类',
          dataIndex: 'value2',
          key: 'value2',
          align: 'center',
          width: 100
        },
        {
          title: '管理控制类',
          dataIndex: 'value3',
          key: 'value3',
          align: 'center',
          width: 100
        },
        {
          title: '担当作为类',
          dataIndex: 'value4',
          key: 'value4',
          align: 'center',
          width: 100
        },
        {
          title: '廉洁从业类',
          dataIndex: 'value5',
          key: 'value5',
          align: 'center',
          width: 100
        },
      ]
    }
  },
  mounted() {
    this.getListData()
  },
  methods:{
    getListData(){
      this.dataSource = [
        {id: 1,name: '崔建勇', score: 85.5, value1: '50%', value2: '5.73%', value3: '95.01%', value4: '100%', value5: '100%'},
        {id: 2,name: '赵宇兵', score: 93.04, value1: '44%', value2: '73.21%', value3: '88%', value4: '83.3%', value5: '100%'},
        {id: 3,name: '荀辉', score: 95, value1: '76.3%', value2: '48.5%', value3: '95.23%', value4: '100%', value5: '99.8%'},
      ]
    },
    updateVisible() {
      this.$emit('update:visible', false);
    },
    startBusinessCard(data){
      console.log(data);
      this.rowData = data
      this.cardVisible = true
    },
  }
}
</script>

<style scoped lang='less'>
.titleBox{
  background-image: url("../../../assets/img/modalBg.png");
  background-repeat: no-repeat;
  height: 53px;
  padding: 12px 24px 14px 35px;
  background-color: #2a4a61;
}
.modalTitle{
  color: #ffffff;
  font-weight: 600;
}
.leaders {
  :global(.ant-modal-header) {
    padding: 0;
    border: 0;
  }
}
.leaders{
  :global(.ant-table-tbody){
    background-color: #2a4a61;
    color: white;
  }
}
.leaders{
  :global(.ant-table-thead > tr > th){
    background-color: #2a4a61;
    color: white;
    font-weight: 600;
  }
}
:global(.ant-table-tbody > tr:hover > td){
  background:transparent ! important;
}
.importData{
  background-color: #027db4;color:#ffffff;padding: 3px 10px;border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 30px;
}
</style>

